<template>
  <div class="tab-content">
    <div class="catalog">
      <a href="" class="catalog_items" v-for="{title,pic} in info" :key="title">
        <span  
        v-lazy:background-image="pic" 
        class="icon lazy_image"></span>
        <span class="title">{{title}}</span>
      </a>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Vue from 'vue';
import Footer from '../components/Footer'
import {getCatalog} from '../api/index';
import { Lazyload } from 'vant';
Vue.use(Lazyload);

export default {
  name:"catalogs",
  data:function(){
    return {
      info:[]
    }
  },
  components:{
    Footer
  },
  async mounted() {
    const {info} = await getCatalog();
    this.info = info;
    console.log(info);
  },
}
</script>

<style lang="scss" scoped>
  .tab-content{
    width:100%;
    height:5.07rem;
    position: relative;
    .catalog{
      display: block;
      width: 100%;
      height: 100%;
      padding: 0.14rem;
    //   background: pink;
      .catalog_items{
        width:1.09rem;
        height:1.04rem;
        display: inline-block;
        position: relative;
        margin: 0 0.1rem 0.1rem 0;
        border-radius: 0.04rem;
        background-color: #fff;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
        text-align: center;
        .icon{
          width:0.5rem;
          height: 0.5rem;
          display: block;
          margin: 0.15rem auto 0.08rem;
          background-position: 50%;
          background-repeat: no-repeat;
          background-size: 100%;
          text-align: center;
        }
        .title{
          font-size: 0.14rem;
          color: #000;
        }
      }
      .catalog_items:nth-child(3n){
        margin-right:0;
      }
    }
  }
  ::after{
    content: "";
    display: block;
    position: relative;
    clear: both;
  }
</style>